<template>
  <div class="container" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 1.安装cesium
// 2、讲cesium目录下的Build/Cesium 的四个目录拷贝倒public

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

const cesiumContainer = ref(null)

onMounted(() => {
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭信息框
    geocoder: false, // 关闭搜索
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景查看器的场景模式
    baseLayerPicker: false, // 图层选择器
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    timeline: false, //时间轴
    fullscreenButton: false, // 全屏按
  })

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  // 生成广州塔的位置113.3191, 23.109,
  const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000)

  // flyTo
  viewer.camera.flyTo({
    // 指定相机的位置
    destination: position,
    orientation: {
      // 指定相机的朝向
      heading: Cesium.Math.toRadians(0),
      // 指定相机的俯仰角 0度竖直向上，-90是垂直向下
      pitch: Cesium.Math.toRadians(-90),
      // 指定相机的滚转角
      roll: 0,
    },
  })
  // 添加一个3d的建筑
  const osmBuilding = viewer.scene.primitives.add(Cesium.createOsmBuildings())

  // 添加一个红色点标记
  // const point = viewer.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 700),
  //   point: {
  //     pixelSize: 10,
  //     color: Cesium.Color.RED,
  //     outlineColor: Cesium.Color.WHITE,
  //     outlineWidth: 4,
  //   },
  // })

  // 添加文字标签和广告牌
  const label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 700),
    label: {
      text: '广州塔',
      font: '24px sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      pixelOffset: new Cesium.Cartesian2(0, -24),
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字的显示位置s上下
    },
    billboard: {
      image: './Textures/gzt.png',
      width: 50,
      height: 50,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.CENTER, // 文字的显示位置s上下
    },
  })
})
</script>
